// 整个播放器
const player = document.querySelector('.player');
// 视频
const video = document.querySelector('.viewer');
// 进度条
const progress = document.querySelector('.progress');
// 进度条填满的部分
const progressFilled = document.querySelector('.progress__filled');
// 音量和倍速滑动条
const ranges = document.querySelectorAll('.player__slider');
// 暂停
const toggle = document.querySelector('.toggle');
// 快进快退
const skips = document.querySelectorAll('[data-skip]');


/* 实现视频暂停 */
function togglePlay() {     // 点击实现暂停
    const method = video.paused ? 'play' : 'pause';
    video[method]();
}
function updateButton() {   // 根据暂停与否更新按钮
    const icon = video.paused ? '►' : '❚ ❚';
    // 绑定在video上的话, 可以直接使用this.paused
    toggle.innerHTML = icon;
}
toggle.addEventListener('click', togglePlay);
// toggle.addEventListener('click', updateButton);
video.addEventListener('click', togglePlay);
// video.addEventListener('click', updateButton);
video.addEventListener('play', updateButton);
video.addEventListener('pause', updateButton);

/* 滑动条控制 */
function handleRangesUpdate() {
    video[this.name] = this.value;
}
ranges.forEach(range => range.addEventListener('mousemove', handleRangesUpdate));

/* 快进快退 */
// video的属性currentTime表示视频当前的时间
// (data-**)这样的属性, 在JS中需要通过(.dataset.**)来访问. 因为获取到的是字符, 所以要通过parseFloat来转换一下。
function handleSkip() {
    video.currentTime += parseFloat(this.dataset.skip);
}
skips.forEach(skip => skip.addEventListener('click', handleSkip));

/* 进度条 */
function handleProgress() {
    // progress__filled是flex元素, 通过改变flex-basis调节宽度
    const percent = (video.currentTime / video.duration) * 100;
    progressFilled.style.flexBasis = `${percent}%`;
}
video.addEventListener('timeupdate', handleProgress); // 进度条随时间变化
// 拖动进度条, 视频时间变化
function scrub(event) {
    // offsetX获取鼠标点击的位置, 与整个进度条作比较
    const scrubTime = (event.offsetX / progress.offsetWidth) * video.duration;
    video.currentTime = scrubTime;
}
progress.addEventListener('click', scrub);

let mousedown = false; // 用于判断是否按下鼠标
progress.addEventListener('mouseup', () => mousedown = false);
progress.addEventListener('mousedown', () => mousedown = true);
progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
// && 短路实现, 比if判断性能更好